type Props = {
    children?: React.ReactNode;
    size?: "sm" | "md" | "lg";
    desc?: string;
};

const sizeClasses = {
    sm: "text-2xl",
    md: "text-3xl",
    lg: "text-lg phone:text-[2rem] laptop:text-[3rem]",
};

const Title: React.FC<Props> = ({ children, desc, size = "lg" }) => (
    <div className="py-6 phone:py-12 laptop:py-24 flex flex-col items-center gap-2 phone:gap-6 laptop:gap-8">
        <h1 className={`text-dark-blue font-[bigTitle] ${sizeClasses[size]}`}>
            {children}
        </h1>
        {desc && (
            <dd className="text-xs phone:text-sm laptop:text-base  text-[rgba(0,58,173,0.3)]">
                {desc}
            </dd>
        )}
    </div>
);

export default Title;
